<template>
    <div class="right-bottom">
        <div class="right-bottom-module1">
            <Title title="数据检索"></Title>
            <div class="right-bottom-module1-box1">
                <div class="right-bottom-module1-box1-num">1</div>
                <div class="right-bottom-module1-box1-content">
                    <div class="right-bottom-module1-box1-content-left">土壤</div>
                    <div class="right-bottom-module1-box1-content-right">1235</div>
                </div>
            </div>
            <div class="right-bottom-module1-box2">
                <div class="right-bottom-module1-box2-num">2</div>
                <div class="right-bottom-module1-box2-list">
                    <img class="img" src="@/images/index/pic.png" alt="" />
                    <div class="tips" v-for="(v, k) in state.list" :key="k"
                        :style="{ left: v.left + 'vw', top: v.top + 'vw' }">
                        <div class="text">{{ v.name }}</div>
                        <div class="num">{{ v.num }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import chart from '@/components/echarts-box.vue'
import Title from '../common/title.vue'
import data from './rightTop'
const state = reactive({
    list: [
        { name: '二氧化碳', num: '320', left: -2, top: 1.7 },
        { name: '氧气', num: '180', left: -1, top: 6 },
        { name: '氮气', num: '400', left: 8, top:6 },
    ],

})
</script>
<style lang="less" scoped>
.right-bottom {
    position: absolute;
    right: 20px;
    top: 50%;
    width: 400px;
    height: 450px;
    display: flex;
    flex-direction: column;

    &-module1 {
        flex: 1;

        &-box1 {
            margin: 0 auto;
            height: 133px;
            width: 305px;
            background: url(@/images/index/border5.png) no-repeat;
            background-size: 100% 100%;
            position: relative;

            &-num {
                position: absolute;
                left: 50%;
                top: 24px;
                font-size: 24px;
                font-weight: normal;
                color: #FFFFFF;
            }

            &-content {
                display: flex;
                position: absolute;
                top: 70%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 16px;

                &-left {
                    margin-right: 20px;
                }
            }
        }

        &-box2 {

            margin: 0 auto;
            height: 258px;
            width: 305px;
            background: url(@/images/index/border6.png) no-repeat;
            background-size: 100% 100%;
            position: relative;

            &-num {
                position: absolute;
                left: 50%;
                top: 24px;
                font-size: 24px;
                font-weight: normal;
                color: #FFFFFF;
            }

            &-list {
                width: 60%;
                position: absolute;
                left: 50%;
                top: 60%;
                transform: translate(-50%, -50%);

                .img {
                    width: 100%;
                    object-fit: cover;
                }

                .tips {
                    position: absolute;
                    line-height: 22px;
                    color: #d8fcff;
                    font-size: 12px;
                    .num {
                        color: #6af2ff;
                    }
                }

            }
        }
    }
}</style>